<!--  -->
<template>
  <div class="ant-tabs">
    <div class="ant-tabs-bar">
      <div class="ant-tabs-nav" style="transform: translate3d(0px, 0px, 0px);">
           <div v-bind:style="inkbar" class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"></div>
          <div v-bind:class="{'ant-tabs-tab-active':index==curindex,'ant-tabs-tab':true}" v-for="item in label" :key="item" :data-index="index" :data-id="item.id" @click="switchTab">
            {{item.text}}
          </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      label: [ {id: 0, text: '人气'}, {id: 4, text: '销量'}, {id: 1, text: '价格'}, {id: 3, text: '券价'} ],
      curindex: 0
    }
  },

  computed: {
    inkbar () {
      return `display: block; visibility: visible; transform: translate3d(${this.curindex * 100}%, 0px, 0px); width: 25%;`
    }
  },

  methods: {
    switchTab (res) {
      let index = res.currentTarget.dataset.index
      let id = res.currentTarget.dataset.id
      this.curindex = index
      this.$emit('switchTab', id)
    }
  }
}

</script>
<style lang='less' scoped>
.ant-tabs {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    zoom: 1;
    color: rgba(0, 0, 0, 0.65);
    .ant-tabs-bar {
      border-bottom: 1px solid #d9d9d9;
      margin-bottom: 16px;
      outline: none;
      transition: padding .45s;
      .ant-tabs-nav {
        box-sizing: border-box;
        padding-left: 0;
        transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
        position: relative;
        margin: 0;
        list-style: none;
        display: inline-block;
        width:100%;
        .ant-tabs-ink-bar {
          z-index: 1;
          position: absolute;
          left: 0;
          bottom: 1px;
          box-sizing: border-box;
          height: 2px;
          background-color: #fe4a65;
          transform-origin: 0 0;
        }
        .ant-tabs-ink-bar-animated {
          transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        }
        .ant-tabs-tab{
          font-size:17px;
          margin-right: 0;
          text-align: center;
          padding: 10px 20px;
          width: 25%;
          display: inline-block;
          height: 100%;
          box-sizing: border-box;
          position: relative;
          transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1); 
          cursor: pointer;
          text-decoration: none;
        }
        .ant-tabs-tab-active{
          color:#fe4a65
        }
      }
    }
}
</style>